<template>
	<view class="detail">
		<view class="title">{{options.title}}</view>
		<view class="content">
			<!-- 富文本渲染 -->
			<!-- 			<u-parse :content="options.content" :tagStyle="tagStyle"></u-parse> -->
			<zero-markdown-view :themeColor="themeColor" :markdown="options.content" :codeBgColor="codeBgColor">
			</zero-markdown-view>

			<!-- <rich-text :nodes="options.content"></rich-text> -->
		</view>
		<view class="description">
			声明：本文的版权归原作者所有。未经原作者书面许可，任何人不得以任何形式或途径复制、转载、引用或以其他方式使用本文的全部或部分内容。
			根据版权法的规定，未经版权所有人的许可，擅自使用他人的作品可能会导致侵权行为，将承担法律责任。版权所有人保留一切通过法律途径追究侵权责任的权利。【联系方式:2571607391@qq.com】
		</view>
	</view>
</template>
<script>
	import {
		parseTime
	} from "../../utils/tool.js"
	export default {
		data() {
			return {
				options: {
					title: "",
					content: ""
				},
				tagStyle: {
					p: "line-height:1.7em;font-size:35rpx; padding-bottom:8rpx; ",
					img: "margin:10rpx 2rpx; ",
				},
				themeColor: '#5288F5',
				codeBgColor: '#2d2d2d' //代码块背景颜色
			};
		},
		onLoad(e) {
			// this.initHighLight();
			this.options = e;
			// console.log("e=", e);
			this.getData(e.id);
		},
		methods: {
			getData(index) {
				uni.request({
					url: this.$e.Url + "/user/getArticle",
					data: {
						id: index
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (res) => {
						console.log("请求API接口【/user/getArticle】", res);
						res.data.posttime = parseTime(res.data.posttime); //时间戳转换
						res.data.content = res.data.content.replace(/<img/gi,
							'<img style="max-width:100%"') //正则替换直接修改HTML标签【解决文字太大的问题】
						this.options = res.data;
						this.saveHistroy();
					}
				})
			},
			saveHistroy() {
				let historyArr = uni.getStorageSync('historyArr') || []; //查看缓存
				let item = {
					id: this.options.id,
					classid: this.options.classid,
					picurls: this.options.picurls,
					title: this.options.title,
					time: parseTime(Date.now()) //获取发布时间
				}
				let index = historyArr.findIndex(i => {
					return i.id == this.options.id //注意是==不是=
				}) //检查缓存中是否有重复的
				if (index >= 0) {
					historyArr.splice(index, 1) //删掉缓存中存在的重复数据，位置在index上
				}
				historyArr.unshift(item) //追加缓存,unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
				historyArr = historyArr.slice(0, 10) //返回前十条数据
				uni.setStorageSync('historyArr', historyArr)
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		background: #ffffff;
		margin: 20rpx;
		border: 1rpx solid #d6d6d6;
		padding: 30rpx;
		border-radius: 20rpx;

		.title {
			@include flex-box-set();
			font-size: 50rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
			font-family: "Times New Roman", "微软雅黑";
		}

		.content {
			padding-bottom: 50rpx;
			font-family: "Times New Roman", "楷体";
		}

		.description {
			background: #FEF0F0;
			padding: 20rpx;
			line-height: 1.8em;
			font-size: 26rpx;
			color: #F89898;
			font-family: "楷体";
		}
	}
</style>
